<template>
<!--使用flex左右布局，menu-wrapper在左边固定宽度，foodswrapper在右边自适应宽度-->
    <mu-paper class="textWrapper goods" :zDepth="2">
        <div class="menu-wrapper" ref="menuWrapper">
            <ul>
                <li v-for="(item,index) in goods" class="menu-item border-1px" :class="{'current': (currentIndex===index)}" @click="selectMenu(index,$event)">
                    <span class="text border-1px">
                        <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="food-wrapper" ref="foodsWrapper">
            <ul>
                <li v-for="(item,indexg) in goods" class="food-list food-list-hook">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="(food,indexf) in item.foods" class="food-item border-1px">
                            <div class="icon">
                                <img :src="food.icon" height="57" width="57">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span>
                                    <span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
                                </div>
                                <cartcontrol class="cartcontrol" :food="food" :indexf="indexf" :indexg="indexg"></cartcontrol>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--购物车组件使用fixed布局固定在浏览器最下方，结算部分固定宽度，左边部分自适应-->
        <!--使用selectfoods和goodsan传入被选中的食物数组，-->
        <!--把shopcart中的计算属性的值通过goodsn取回App根组件中-->
        <shopcart :select-foods="selectFoods"></shopcart>
    </mu-paper>
</template>

<script type="text/ecmascript-6">
  //    传入betterscroll插件
  import BScroll from 'better-scroll'
  import shopcart from '../shopcart/shopcart.vue'
  import cartcontrol from '../cartcontrol/cartcontrol.vue'
  const ERR_NO = 0
  export default {
//    注册shopcart和cartcontrol组件
    components: {
      shopcart,
      cartcontrol
    },
    data: function () {
      return {
//        保存当前foodlist顶端所在Y值
        scrollY: 0,
//        用于对foodlist各个分类高度进行保存的数组
        listHeight: []
      }
    },
    created () {
//      用于根据menulist中的每一项的type来动态设置类型的map
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
//      第一次启动的时候goods此时还没有被赋值还是空数组，因此必须切换到别的页面再切换回来才能滚动，或者初始页面不是此页的时候才能滚动
      if (this.$store.state.flag) {
        this.$http.get('/api/goods').then(response => {
            response = response.body
            if (response.errno === ERR_NO) {
              this.$store.dispatch('setFlag')
              this.$store.dispatch('setGoods', response.data)
              this.$nextTick(() => {
                this._initScroll()
                this._calculateHeight()
              })
            }
          }, response => {
//        这里是http请求失败时候的回调
            console.log('web flault')
          }
        )
      }
      if (!this.$store.state.flag) {
        this.$nextTick(() => {
          this._initScroll()
          this._calculateHeight()
        })
      }
    },
//    为了第一次启动的时候，第一个进入的是这个页面的情况下页可以直接滚动，必须监听goods被赋值了再给初始化
//    watch: {
//      goods () {
//        this.$nextTick(() => {
//          this._initScroll()
//          this._calculateHeight()
//        })
//      }
//    },
//    从App根组件传入的两个属性，一个是被选中的食物数组，一个是包含包厢、总价总数的对象
    computed: {
//      用于通过scrolly值来判断当前的foodlist菜单在哪个menulist区间
      currentIndex () {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i]
          let height2 = this.listHeight[i + 1]
          if (!height2 || this.scrollY >= height1 && this.scrollY < height2) {
            return i
          }
        }
      },
//      用于计算出被选中的食物数组，以及在根组件的theselectfoods数组中设置同样的食物数组
      selectFoods () {
        let selcetFoodsList = []
//        清空VUEX中的选择食物清单，防止多次选择的数组内容累加
        this.$store.dispatch('clearSelectFoods')
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              selcetFoodsList.push(food)
//              往VUEX里设置被选中的食物
              this.$store.dispatch('addSelectFoods', food)
            }
          })
        })
//        将selectfoods这个计算属性的值return，然后通过props传入购物车组件
        return selcetFoodsList
      },
      goods () {
        return this.$store.state.goods
      }
    },
    methods: {
//      betterscroll的初始化方法
      _initScroll () {
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        })
        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
          click: true,
          probeType: 3
        })
//        对foodlist滚动条的监听，并将scrolly数值绑定到scrolly
        this.foodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y))
          //            console.log(this.scrollY)
          //            console.log(this.currentIndex)
        })
      },
//      这个方法会和better的初始化方法一起在created中一起被调用，用于初始化高度数组列表
      _calculateHeight () {
        let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
        let height = 0
        this.listHeight.push(height)
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i]
          height += item.clientHeight
          this.listHeight.push(height)
        }
      },
//      用于通过点击让foodslist跳转到对应的dom对象
      selectMenu (index, event) {
        if (!event._constructed) {
          return
        }
//        console.log(index) 去掉点击的时候输出memulist的index
        let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
        let el = foodList[index]
        this.foodsScroll.scrollToElement(el, 300)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/components/goods.styl"
    @import "../mixin.styl"
    .goods
        display flex
        position absolute
        top 45px
        bottom 0px
        width 95%
        background #fff
        overflow hidden
        .menu-wrapper
            flex 0 0 80px
            height 90%
            background #f3f5f7
            .menu-item
                display table
                width: 80px
                height 54px
                padding 0 12px
                font-size 12px
                line-height 14px
                border-1px(rgba(7, 17, 27, 0.1))
                &.current
                    position relative
                    z-index 10
                    margin-top -1px
                    font-weight 700
                    background #FFF
                    .text
                        border-none()
                .icon
                    display inline-block
                    width 12px
                    height 12px
                    margin-right 4px
                    vertical-align top
                    background-size 12px 12px
                    background-repeat no-repeat
                    &.decrease
                        bg-image('../../common/pic/decrease_3')
                    &.discount
                        bg-image('../../common/pic/discount_3')
                    &.special
                        bg-image('../../common/pic/special_3')
                    &.invoice
                        bg-image('../../common/pic/invoice_3')
                    &.guarantee
                        bg-image('../../common/pic/guarantee_3')
                .text
                    display table-cell
                    vertical-align: middle
        .food-wrapper
            flex 1
            height 90%
            .title
                height 26px
                padding-left 14px
                color rgb(147,153,159)
                font-size 12px
                line-height 26px
                border-left 2px solid #d9dde1
                background #f3f5f7
            .food-item
                display flex
                margin 18px
                padding-bottom 18px
                border-1px(rgba(7,17,27,0.1))
                &:last-child
                    margin-bottom 0
                    border-none()
                .icon
                    flex 0 0 57
                    margin-right 10px
                .content
                    flex 1
                    .name
                        height 14px
                        margin 2px 0 8px 0
                        color rgb(7,17,27)
                        font-size 14px
                        line-height 14px
                    .desc, .extra
                        color rgb(147,153,159)
                        font-size 10px
                        line-height 10px
                    .desc
                        margin-bottom 8px
                    .extra
                        .count
                            margin-right 12px
                    .price
                        .now
                            color rgb(240,20,20)
                            font-size 14px
                            font-weight 700px
                            line-height 24px
                        .old
                            color rgb(147,153,159)
                            font-size 10px
                            font-weight 700px
                            line-height 24px
                            text-decoration line-through
                    .cartcontrol
                        position absolute
                        right 0
                        bottom 16px

</style>
